<template>
	<view class="box">
		<!-- 自定义导航栏 -->
		<z-nav-bar transparentFixedFontColor="#fff" type="transparentFixed" title="我的邀请码"></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		
		<canvas style="width: 300px; height: 545px;margin: 0 auto;" canvas-id="firstCanvas" id="firstCanvas" v-if="!haibao"></canvas>
		<image :src="haibao" mode="" style="width: 300px; height: 545px;margin: auto;" v-else></image>
		<view class="main-btn flex" v-if="dowPoster">
			<view class="btn flex align-item" @click="preservation">
				<image class="btn-icon" :src="imgUrl + 'static/web/icon/202203251120.png'" mode=""></image>
				<view class="btn-tit">
					保存
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.$http.baseUrl, // 服务器域名
				yuyueBgImg: this.$http.baseUrl + '/static/web/img/202203251119.jpg', // 顶部背景
				data: [], // 存储获取的信息
				dowPoster: false,
				haibao: ''
			}
		},
		onLoad() {

		},
		methods: {
			// 获取二维码
			getCode() {
				var type
				// #ifdef H5
				type = 'h5'
				// #endif
				// #ifdef MP-WEIXIN
				type = 'wx'
				// #endif
				
				// #ifdef APP-PLUS
				type = 'app'
				// #endif
				var that = this
				this.$http.get('api/ZhExtension/add',{'type':type}).then(res => {
					if (res) {
						that.data = res;
						
						this.drawPoster(this.yuyueBgImg, res.avatar, res.qr_code);
						
					}
				})
			},
			// 保存图片
			preservation() {
				var that = this
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 300,
					height: 545,
					canvasId: 'firstCanvas',
					success: function(res) {
					// 在H5平台下，tempFilePath 为 base64
						that.haibao = res.tempFilePath
						// #ifdef MP-WEIXIN || APP-PLUS
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
							},
							fail: function() {
								uni.showToast({
									title: '保存失败，请稍后重试',
									icon: 'none'
								})
							}
						});
						// #endif
						// #ifdef H5
						var oA = document.createElement("a"); // 创建一个a标签
						// 正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本 ,
						// a的download 谷歌浏览器必须同源才能强制下载，否则跳转到图片地址
						oA.download = that.haibao.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; ; // 设置下载的文件名，默认是'下载'
						oA.href = that.haibao;
						document.body.appendChild(oA);
						oA.click();
						oA.remove(); // 下载之后把创建的元素删除
						// #endif
					},
				})
			},
			// 绘制海报
			drawPoster(bg, avatar, qrcode) {
				var context = uni.createCanvasContext('firstCanvas')
				
				// #ifdef H5
				// bg = bg.replace(this.$http.baseUrl,'/file_path');
				// qrcode = qrcode.replace(this.$http.baseUrl,'/file_path/');
				// #endif
				
				uni.downloadFile({
					url: bg, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							context.drawImage(res.tempFilePath, 0, 0, 300, 545);

							uni.downloadFile({
								url: avatar, //仅为示例，并非真实的资源
								success: (res) => {
									if (res.statusCode === 200) {
										context.drawImage(res.tempFilePath, 124, 284, 50, 50);
										context.setFontSize(12)
										context.setFillStyle('#BEC6D3')
										context.fillText('诚邀您的加入', 112, 350)
										
										uni.downloadFile({
											url: qrcode, //仅为示例，并非真实的资源
											success: (res) => {
												if (res.statusCode === 200) {
													
													context.drawImage(res.tempFilePath,
														100, 380, 100, 100);
													context.draw(false,(e)=>{
														this.dowPoster = true
														
													})
												}
											}
										});
									}
								}
							});
						}
					}
				});
			}
		},
		onShow() {
			this.getCode()
		}
	}
</script>

<style>
	page {
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		// #ifdef H5
		background-color: rgba(0, 0, 0, 0.1);
		// #endif
	}
</style>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.align-item {
		align-items: center;
	}

	.j-between {
		justify-content: space-between;
	}

	.column {
		flex-direction: column;
	}

	.box {
		padding: 235rpx 0 0;
		// #ifdef H5
		padding: 120rpx 0 0;
		// #endif
	}

	.main-btn {
		width: 100%;
		justify-content: center;
		margin-top: 64rpx;

		.btn {
			justify-content: center;
			width: 296rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.btn-icon {
				width: 30rpx;
				height: 30rpx;
			}

			.btn-tit {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000013;
				margin-left: 10rpx;
			}
		}
	}
</style>
